<template>
  <el-card class="card-size" :body-style="{ padding: '0px' }">
    <img :src="'http://www.codeedu.com.cn/' + res.productPicture" class="image" />
    <div class="primary">{{res.productName}}</div>
    <div class="secondary">{{res.productTitle}}</div>
    <div class="tertiary">
      <span>{{res.productSellingPrice+ '元'}}</span>
      <span v-if="res.productPrice !== res.productSellingPrice" class="del-word">{{res.productPrice + '元'}}</span>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "SingleCard",
  props:{
    res:{
      type:Object,
    }
  },
  data() {
    return {};
  },
  created(){
    
  },
  mounted() {},

  methods: {
  },
};
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  display: block;
}
.card-size {
  border-radius: 0px;
  box-shadow: none;
  width: 232px;
  height: 300px;
  box-sizing: border-box;
  .image {
    margin: 14px 36px 24px;
    width: 160px;
    height: 160px;
  }
  text-align: center;
  .primary {
    font-size: 14px;
    color: #333333;
  }
  .secondary {
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 14px;
  }
  .tertiary {
    margin-top: 12px;
    font-size: 16px;
    color: #ff6700;
    .del-word{
      margin-left: 7px;
      text-decoration: line-through;
      color:  #B0B0B0;
    }
  }
  &:hover {
    cursor: pointer;
    box-shadow: 
    -5px 0px 5px 0px rgba(0, 0, 0, 0.1),
    5px 0px 5px 0px rgba(0, 0, 0, 0.1),
    0px 10px 25px 0px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}
</style>
